/**
 * Description
 *
 * Creation Date 25/12/2017
 * @author Candy
 */
import React, { Component } from 'react'
import PropTypes from 'prop-types';
import {
	StyleSheet,
	View,
	Image,
	TouchableHighlight,
	TouchableOpacity,
	Platform,
	FlatList,
	Text
} from 'react-native';
import { connect } from 'react-redux';
import { NavigationActions } from 'react-navigation';
import { is, fromJS} from 'immutable';
import Icon from 'react-native-vector-icons/Ionicons';
import { screen, color } from '../../utils';
import ProfileInfo from './ProfileInfo';
import { GetUserInfo } from '../../redux/actions/rootActions';
import ButtonItem from '../../components/ButtonItem';
import { setStore, getStore, removeStore } from '../../utils/tools';

class Profile extends Component {
	static navigationOptions = ({navigation}) => ({
		header: <View style={{width: screen.width, height: 30, backgroundColor: color.backgroundColor}} />
	});

	static contextTypes = {
		store: PropTypes.any
	};

	constructor(props, context) {
		super(props, context);
		this.state = {
		}
	}

	goBack = () => {
		const backAction = NavigationActions.back({
			key: this.props.navigation.state.key,
		});
		console.log(backAction);
		this.props.navigation.goBack();
	};

	componentWillMount() {
		this.props.GetUserInfo();
	}

	shouldComponentUpdate(nextProps, nextState) {
		return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state),fromJS(nextState))
	}

	render() {
		const {  user } = this.context.store.getState().profileReducers;
		return (
			<View style={styles.container}>
				{
					user && user.user_id && <View style={styles.gridContainer}>
						<TouchableOpacity onPress={this.goBack} style={{paddingLeft:10, paddingRight: 15, marginTop: 3}}>
							<Icon name="ios-arrow-back" size={25} color={color.black} />
						</TouchableOpacity>
					</View>
				}
				{
					user && user.status == 0 &&
					<View>
						<View style={[styles.gridContainer, {justifyContent: 'center'}]}><Image resizeMode='stretch' source={{uri: 'https://4eb7f3de389ff6b61816-1dd1d9fd8ad438da629d92a7640b81cb.ssl.cf1.rackcdn.com/GDR2016/GDR477/DESKTOP/Ten_Years_Logo_9.png?param=100y20'}} style={{width: screen.width/2.5, height: 30, marginTop: 5}} /></View>
						<Text style={{width: screen.width, textAlign: 'center', marginTop:40, fontSize: 20}}>还没有登录！</Text>
						<ButtonItem buttonText="GO TO LOGIN" onPress={() => this.props.navigation.navigate('LoginDetail', {title: 'profile'})} style={{backgroundColor: '#B8B8B8'}} />
					</View>
				}
				{
					user && user.user_id && <ProfileInfo user={user} />
				}
			</View>
		)
	}
}

//连接reducer
export default connect((state) => {
	const { profileReducers } = state;  // 这里的profileReducers注意和对应的reducer文件export的类相同
	return {
		profileReducers,
	}
}, { GetUserInfo })(Profile) // 这里是对应的存值的方法,导出当前模块


const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: color.backgroundColor
	},
	gridContainer: {
		marginRight: 20,
		marginLeft: 20,
		paddingTop: 5,
		paddingBottom: 5,
		flexDirection: 'row',
		flexWrap: 'wrap',
		alignItems: 'center',
		justifyContent: 'space-between'
	},
	textStyle:{
		width:screen.width/2,
		alignItems:'center',
		justifyContent: 'center'
	},
	brandImage: {
		width: 150,
		height: 80
	},
	price: {
		fontSize: 18,
		textAlign: 'center',
		fontWeight: 'bold'
		// color: color.theme
	}
});